<template>
  <main>
    <img src="../assets/images/head.jpg" alt="" />
    <div class="box">
      <h2>脱贫攻坚政策</h2>
      <p>Poverty alleviation policies</p>
      <ul class="head clearfix">
        <li v-for="item in 3" :key="item">
          <a href="#">
            <img src="@/assets/images/lb_1.jpg" alt="" />
            <i>6-10</i>
            <h5>我县召开南部片区乡村振兴示范带项目 推进会</h5>
            <p>
              我县召开南部片区乡村振兴示范带项目推进会。会议强调要坚持问题导向、结果导向，推进南部片区乡村振兴示范带项目高质量、高标准进行，推动我县乡村振兴工作取得新进展、新成效。
              要完善推动落实机制，运用扁平化管理提升管理效率，问题在一线解决、工作在一线推动，不断提高项目推进效率；要加强双方信息共享，及时解决存在问题，推动工作落实。
              要完善监督质量机制，严守质量生命线，高质量高标准推进项目建设，将项目打造成乡村振兴的样板工程，加快推进乡村振兴落地见效。
            </p>
          </a>
        </li>
      </ul>
    </div>
    <div class="co">
      <ul>
        <li v-for="item in 10" :key="item">
          <a href="#/news">
            <div>
              <h5>我县召开南部片区乡村振兴示范带项目</h5>
              <i>6-10</i>
            </div>
            <p>
              我县召开南部片区乡村振兴示范带项目推进会。会议强调要坚持问题导向、结果导向，推进南部片区乡村振兴示范带项目高质量、高标准进行，推动我县乡村振兴工作取得新进展、新成效。
              要完善推动落实机制，运用扁平化管理提升管理效率，问题在一线解决、工作在一线推动，不断提高项目推进效率；要加强双方信息共享，及时解决存在问题，推动工作落实。
              要完善监督质量机制，严守质量生命线，高质量高标准推进项目建设，将项目打造成乡村振兴的样板工程，加快推进乡村振兴落地见效。
            </p>
          </a>
        </li>
      </ul>
    </div>
    <div class="fy">
      <el-pagination layout="prev, pager, next" :total="1000"> </el-pagination>
    </div>
  </main>
</template>

<script>
export default {
  name: "MyTpgjzc",
};
</script>

<style scoped>
main > img {
  height: 250px;
  width: 100%;
}
.box {
  width: 80%;
  margin: 0 auto;
  margin-top: 80px;
}
.box h2 {
  text-align: center;
  font-size: 28px;
}
.box > p {
  text-align: center;
  margin: 10px 0;
}
.box ul li {
  width: calc(100% / 3);
  box-sizing: border-box;
  padding: 30px;
  float: left;
}
main ul li a {
  display: block;
  color: black;
}
.box ul li img {
  width: 100%;
}
.box ul li a h5 {
  font-size: 16px;
  margin: 10px 0;
}
.box ul li a i {
  font-style: normal;
}
.box ul li a p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
}
.box ul li:hover h5 {
  color: red;
}
.co {
  width: 80%;
  margin: 0 auto;
}
.co div {
  display: inline-block;
  width: 100%;
  margin: 10px 0;
}
.co li {
  padding: 10px 0;
  border-bottom: 1px dashed;
}
.co li:last-child {
  border: none;
}
.co li:hover h5 {
  color: red;
}
.co h5 {
  width: 80%;
  float: left;
  font-size: 18px;
}
.co i {
  font-style: normal;
  width: 20%;
  display: block;
  float: left;
  text-align: center;
}
.co p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 30px;
}
.el-pagination {
  margin: 20px;
  display: flex;
  justify-content: space-between; /* 水平均分 */
}
</style>